<template>
  <div class="weather">
    <div class="header">
      <HeaderTop
        :weather-data="weatherData"
        @update:add-button-visibility="handleAddButtonVisibilityUpdate"
      ></HeaderTop>
    </div>
    <div class="main">
      <div
        class="tips"
        v-if="weatherData && weatherData.lives && weatherData.lives.length > 0"
      >
        你正在预览{{ weatherData.lives[0].city }}的天气信息
        <span v-if="shouldShowAddButton"
          >，可以通过右上角的"+"号按钮保存起来</span
        >
      </div>
      <div class="TodayInfo">
        <h1
          v-if="
            weatherData && weatherData.lives && weatherData.lives.length > 0
          "
        >
          当日气温是：{{ weatherData.lives[0].temperature }}摄氏度
        </h1>
        <h1
          v-if="
            weatherData && weatherData.lives && weatherData.lives.length > 0
          "
        >
          当日天气是：{{ weatherData.lives[0].weather }}
        </h1>
        <h1
          v-if="
            weatherData && weatherData.lives && weatherData.lives.length > 0
          "
        >
          当日风向是：{{ weatherData.lives[0].winddirection }}风
        </h1>
        <h1
          v-if="
            weatherData && weatherData.lives && weatherData.lives.length > 0
          "
        >
          当日风力是：{{ weatherData.lives[0].windpower }}级
        </h1>
      </div>
      <hr />
      <div class="container">
        <div class="TodayWeatherInfo">
          <WeatherInfo :weatherData="weatherData2"></WeatherInfo>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'

import HeaderTop from '../Header/HeaderTop.vue'
import WeatherInfo from '../Main/WeatherInfo.vue'

import { getWeatherData } from '@/API'

// 获取路由参数
const route = useRoute()
const adcode = route.params.adcode

const weatherData = ref({}) //一个用于传入本组件用于extension=base的情况
const weatherData2 = ref({}) //用于传入WeatherInfo组件用于extension=all的情况

// 响应式数据：接收来自HeaderTop的加号按钮可见性状态
const shouldShowAddButton = ref(true)
const handleAddButtonVisibilityUpdate = (isVisible) => {
  shouldShowAddButton.value = isVisible
}

onMounted(async () => {
  weatherData.value = await getWeatherData(adcode, 'base')
  weatherData2.value = await getWeatherData(adcode, 'all')
  // console.log(weatherData)
})

// 将weatherData作为props传递给HeaderTop
defineProps({
  weatherData: {
    type: Object,
    default: () => ({}),
  },
})
</script>

<style lang="scss" scoped>
.weather {
  min-height: 100vh;
  background-color: rgb(0, 102, 138);
  .main {
    color: white;
    display: flex;
    flex-direction: column;
    .tips {
      background-color: rgb(0, 78, 113);
      padding: 0.5rem;
      text-align: center;
    }
    .TodayInfo {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-top: 1.5rem;
      text-align: center;
      h1 {
        font-size: inherit;
        font-weight: inherit;
      }
    }
    hr {
      margin-top: 1.5rem;
      opacity: 0.1;
    }
    .container {
      margin: 0 183.5px;
      padding: 0 160px;
    }
  }
}
</style>
